<template>
    <div class="content-box">
        <e-heading class="title" grade="1">邀请球队</e-heading>

        <el-table class="p-list"
                  :data="playerList"
                  style="width: 100%">
            <el-table-column
                    class="team-info"
                    prop=""
                    label="球队"
                    width="280">
                <template slot-scope="scope">
                    <img class="team-logo" v-bind:src="scope.row.avatar">
                    <span class="team-name">{{scope.row.nickname}}</span>
                    <img class="sub-logo" v-bind:src="scope.row.subLogo">
                </template>
            </el-table-column>
            <el-table-column
                    prop="area"
                    label="地区"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="level"
                    label="级别"
                    width="180">
            </el-table-column>
            <el-table-column
                    label=""
                    width="180">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.invited">已邀请</el-button>
                    <el-button class="orange" type="primary" v-else>邀请</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="look-more">
            查看更多
        </div>
    </div>

</template>

<script>
  export default {
    components: {},
    computed: {},
    data () {
      return {
        playerList: [
          {
            id: 1,
            nickname: '华体星空',
            area: '深圳市南山区',
            avatar: '/static/images/default_photo.jpg',
            subLogo: '/static/images/sub-logo.png',
            level: '小队'
          },
          {
            id: 2,
            nickname: '一比分',
            area: '深圳市南山区',
            avatar: '/static/images/default_photo.jpg',
            subLogo: '/static/images/sub-logo.png',
            level: '校队'
          },
          {
            id: 3,
            nickname: '华海乐盈',
            area: '深圳市南山区',
            avatar: '/static/images/default_photo.jpg',
            subLogo: '/static/images/sub-logo.png',
            level: '校队'
          },
          {
            id: 4,
            nickname: '华海律政',
            area: '深圳市南山区',
            avatar: '/static/images/default_photo.jpg',
            subLogo: '/static/images/sub-logo.png',
            level: '校队'
          },
          {
            id: 5,
            nickname: '华体星空',
            area: '深圳市南山区',
            avatar: '/static/images/default_photo.jpg',
            subLogo: '/static/images/sub-logo.png',
            level: '校队'
          }
        ]
      }
    }

  }
</script>

<style scoped lang="scss">
    

    .p-list {
        margin-top: 20px;
        .team-logo {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            margin: 10px 0;

        }
        .sub-logo {
            width: 64px;
            height: 14px;
            margin: 22px 0;
        }
        img {
            float: left;
        }
        .team-name {
            float: left;
            display: inline-block;
            margin: 17px 5px;
        }
        .orange {
            background-color: $color-warning;
            border-color: $color-warning;
            color: #fff;
            padding: 7px 15px;
        }

        .invite-btn {
            background-color: $color-warning;
            border-color: $color-warning;
            padding: 7px 15px;
        }

    }

    .p-list li:nth-child(4n) {
        margin: 0;
    }

    .look-more {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin: 30px 0;
        cursor: pointer;
    }
</style>
